<!-- My Bots -->
<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <template>
      <div>
        <!-- <el-form :inline="true">
          <el-form-item>
            <el-button size="small"
                       type="primary"
                       @click="addOrUpdateHandle()">{{ $t('custom.workSchedule.template.addBtn') }}
            </el-button>
          </el-form-item>
        </el-form> -->
        <div class="control-section">
          <div class="content-wrapper"
               v-loading="dataListLoading">
            <ejs-grid :dataSource="comDataList"
                      :allowResizing='gridDefaultSetting.allowResizing'
                      :allowFiltering='gridDefaultSetting.allowFiltering'
                      :filterSettings='gridDefaultSetting.filterSettings'
                      :allowGrouping='true'
                      :allowPaging='true'
                      :toolbar="gridDefaultSetting.toolbar"
                      :allowTextWrap="gridDefaultSetting.allowTextWrap"
                      :showColumnChooser='gridDefaultSetting.showColumnChooser'
                      :allowReordering='gridDefaultSetting.allowReordering'
                      :allowSorting='true'
                      :sortSettings='sortSettings'
                      :editSettings='editSettings'
                      ref="grid"
                      class="sortingenabled"
                      style="margin-top: 30px;"
                      :selectionSettings='gridDefaultSetting.selectOptions'
                      :rowSelected='dataListSelectionChangeHandle'
                      :pageSettings='pageSettings'
                      :commandClick="commandClick"
                      :showColumnMenu='gridDefaultSetting.showColumnMenu'>
              <e-columns>
                <e-column field='name'
                          :headerText="$t('custom.bots.name')"
                          :template='BotNameFormat'
                          :width='120'></e-column>
                <e-column field='configStatus.configName'
                          :headerText="$t('custom.reports.integration')"
                          :width='130'></e-column>
                <e-column field='description'
                          :headerText="$t('custom.bots.description')"
                          :width='230'></e-column>
                <e-column field='createTime'
                          :headerText="$t('custom.bots.createTime')"
                          :width='150'
                          :template='CreateTimeFormat'></e-column>
                <e-column field='updateTime'
                          :headerText="$t('custom.bots.updateTime')"
                          :width='150'
                          :template='UpdateTimeFormat'></e-column>
                <e-column :headerText="$t('customize')"
                        :template="BotTemplateBtn"
                        width='240'
                        textAlign='Right'></e-column>
              </e-columns>
            </ejs-grid>
          </div>
        </div>
      </div>
      <AddOrUpdate v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshList="getDataList"></AddOrUpdate>
      <!-- <PublishBot ref="publish-bot" /> -->
    </template>
    <!-- <div v-else
         class="no-permission">You don't have permission yet.</div> -->
  </el-card>
</template>
<script>
import Vue from 'vue'
import mixinViewModule from '@/mixins/crud-view-module'
import { deleteBotInfoApi } from '@/api/new'
import CreateTimeFormat from './BotFormatComponents/CreateDateFormat'
import UpdateTimeFormat from './BotFormatComponents/UpdateTimeFormat'
import BotNameFormat from './BotFormatComponents/BotNameFormat'
import AddOrUpdate from '../my-bots/add-or-update-bak'
// import PublishBot from './publish-bot'

export default {
  mixins: [mixinViewModule],
  components: { AddOrUpdate },
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/web/bots/sys/bot/list-integration',
        getDataListIsPage: false
      },
      loading: false,
      dataForm: {
        disable: true,
        scope: this.pageSource,
        showAllIntegration: true,
        businessType: 'Template'
      },
      CreateTimeFormat: function () {
        return { template: CreateTimeFormat }
      },
      UpdateTimeFormat: function () {
        return { template: UpdateTimeFormat }
      },
      BotNameFormat: function () {
        return { template: BotNameFormat }
      },
      editSettings: {
        allowDeleting: false,
        allowAdding: false,
        mode: 'Cell'
      },
      sortSettings: {
        columns: [
          { field: 'scope', direction: 'Ascending' },
          { field: 'name', direction: 'Ascending' }
        ]
      }, // Descending
      pageSettings: { pageSize: 100, pageSizes: [50, 100, 200, 1000], pageCount: 4 },
      BotTemplateBtn: function () {
        return { template: BotTemplateBtn }
      }
    }
  },

  computed: {
    comDataList () {
      return this.dataList.filter(e => e.version === '2')
    }
  },
  created () {
    Vue['_this_bot_template_'] = this
  },
  methods: {
    commandClick (type, row) {
      if (type === 'Edit') {
        this.$store.commit('BOTFORMEDIT', true)
        this.addOrUpdateHandle(row.id)
      }
      if (type === 'Delete') {
        this.deleteBots(row.id)
      }
      if (type === 'Design') {
        this.$store.commit('RECORDBOTID', row.id)
        // this.$router.push({ name: 'mspbots-bots-bak-bot-view-index', query: { botId: row.id, designMode: 'designTemplate' } })
        this.$router.push({ name: 'mspbots-bots-bak-bot-design-index', query: { botId: row.id, designMode: 'designTemplate' } })
      }
      if (type === 'Push') {
        this.publishBot(row.id)
      }
    },
    deleteBots (id) {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('delete'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          const params = {
            id: id
          }
          deleteBotInfoApi(params).then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.getDataList()
            return this.$message.success(res.msg)
          })
        })
        .catch(() => { })
    }
    // publishBot (id) {
    //   this.$refs['publish-bot'].openDialog(id)
    // }
  },
  destroyed () {
    delete Vue['_this_bot_template_']
  }
}
const BotTemplateBtn = Vue.component(
  'botTemplate-btn', {
    template: `<div style="display: flex;justify-content: flex-end;">
      <el-button size="mini" plain type="primary" @click="clickSelect('Edit',$data.data)">Edit</el-button>
      <el-button size="mini" plain type="danger"  @click="clickSelect('Delete',$data.data)">Delete</el-button>    
      <el-button size="mini" plain type="success" @click="clickSelect('Design',$data.data)">Design</el-button>
      <!-- <el-button size="mini" plain type="warning"  @click="clickSelect('Push',$data.data)">Push</el-button> -->
    </div>`,
    data () {
      return {}
    },
    methods: {
      clickSelect (e, row) {
        Vue._this_bot_template_.commandClick(e, row)
      }
    }
  }
)
</script>
<style scoped>
.content-wrapper ::v-deep .sortingenabled {
  margin-top: 30px;
}

.e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv,
.e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
  margin: -28px 8px -29px 0;
}
.no-permission {
  width: 600px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #999;
  font-size: 3em;
  position: absolute;
  left: calc(50% - 300px);
  top: calc(50% - 30px);
}
</style>
